<%--
  Created by IntelliJ IDEA.
  User: 17420
  Date: 2021/8/2
  Time: 10:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        body{
            background-image:url("img/背景.jpg");
        }

        .register{
            /*width:25%;*/
            width: 380px;
            height:auto;
            background-color:#fff;
            position:absolute;
            top:20%;
            /*left:35%;*/
            left: 50%;
            margin-left: -190px;

            border-radius: 20px;
            padding-bottom:60px;
            text-align: center;
            letter-spacing:5px;
        }

        .new_code,.user_name{
            width:200px;
            position:relative;
            top:0px;
            left:0px;
            border:2px solid #BEBEBE;
        }

        .new_code:focus,.user_name:focus{
            outline: none;
            border:2px solid #000;
        }

        .register button{
            width:70px;
            height:30px;
            background-color: #313438;
            border-radius: 5px;
            position:relative;
            top:0px;
            left:0px;
            border:none;
            color:white;
        }

        .register button:hover{
            background-color: #000000;
            cursor:pointer;
        }

        .title{
            width:100%;
            height:100px;
            background-color: #313438;
            text-align: center;
            line-height: 100px;
            border-top-right-radius: 20px;
            border-top-left-radius: 20px;
            color:white;
            margin-bottom: 40px;
            font-size: 20px;
        }

        .hobby{
            outline:none;
            border:2px solid #BEBEBE;
            width:110px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>   <!--引入jquery库-->
    <script>
        window.onload=function(){
            //重置表单：
            $('#reset2').on('click',function(){
                $('#user_name').val("");
                $('#new_code').val("");
                $('#new_code2').val("");
                $(".hobby").each(function(){
                    $(this).find("option").eq(0).prop("selected",true)
                });
            })

            //验证表单：
            $('#registered2').on('click',function(e){
                if($('#user_name').val()==null||$('#user_name').val()==""){
                    alert("用户名不能为空！");
                    e.preventDefault();
                }

                else if($('#new_code').val()==null||$('#new_code').val()==""){
                    alert("密码不能为空！");
                    e.preventDefault();
                }
                else if($(".hobby option:selected").val()=='none'){
                    alert("请选择您的观影喜好！");
                    e.preventDefault();
                }
                else if($('#new_code2').val()==null||$('#new_code2').val()==""){
                    alert("请确认密码！");
                    e.preventDefault();
                }
                else if($('#new_code').val()!=$('#new_code2').val()){
                    alert("确认密码有误，请重新填写！");
                    $('#new_code2').val("");
                    e.preventDefault();
                }
                else{
                    alert("注册成功！");
                }


            })

            //密码强弱性检查：
            $('#new_code').blur(function(){
                var password = $('#new_code').val();
                var str1=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]/;  //检查密码同时包含字母和数字得正则表达式
                var num_letter=str1.test(password);
                var str2=/(\w)*(\w)\2{2}(\w)*/g;   //检查连续重复3个相同字符的正则表达式
                var repeat=str2.test(password);
                var str3=/(012|123|234|345|456|567|678|789)/  //检查连续3个相邻数字的正则表达式
                var increasing=str3.test(password);

                if($('#new_code').val()=="") $('#new_code').val("");
                else if($('#new_code').val().length<6){
                    alert("密码不能少于6位，请重新填写！");
                    $('#new_code').val("");
                }
                else if(!num_letter){
                    alert("密码较弱！应同时包含数字和字母，请重新填写！")
                    $('#new_code').val("");
                }
                else if(repeat){
                    alert("密码较弱！不能连续输入3个及以上重复字符，请重新填写！")
                    $('#new_code').val("");
                }
                else if(increasing){
                    alert("密码较弱！不能连续输入3个及以上相邻数字，请重新填写！")
                    $('#new_code').val("");
                }

            })

        }
    </script>
</head>

<body>
<!--注册框-->
<div class="register" id="register">
    <div class="title">
        <p>线上电影评分系统</p>
    </div>
    <form action="Info?method=register" method="post">
        用户名：<input class="user_name" id="user_name" type="text" name="username"><br><br>
        密码：<input class="new_code" id="new_code" type="password" name="password"><br><br>
        确认密码：<input class="new_code" id="new_code2" type="password" name="confirmPwd"><br><br>
        选择您的观影喜好：
        <select class="hobby" name="hobbies">
            <option value="none" selected disabled hidden></option>
            <option value="喜剧">喜剧</option>
            <option value="动作">动作</option>
            <option value="爱情">爱情</option>
            <option value="悬疑">悬疑</option>
            <option value="科幻">科幻</option>
            <option value="动画">动画</option>
        </select><br><br><br><br><br>
<%--        <p style="color:red">${errorInformation}</p>--%>
        <button id="reset2">重置</button>&nbsp;&nbsp;&nbsp;
        <button id="registered2">注册</button>
    </form>


</div>
</body>
</html>
